<template>
  <div id="goodsDetail">
    <van-row class="goodsDetail-centenr">
      <van-col span="24" class="centenr-box1">
        <van-col span="8">
          <div>
            <img :src="getGoodsImg" alt="" />
          </div>
        </van-col>
        <van-col span="16" class="Price-p">
          <h4>价格：￥{{ this.$route.query.retailPrice }}</h4>
          <p>{{ CurSpecifications[0] }} {{ CurSpecifications[1] }}</p>
        </van-col>
      </van-col>
      <van-row>
        <!-- 规格 -->
        <!-- <van-col span="24" class="centenr-box2" >
          <p>{{ Specifications[0].name }}</p>
          <div>
            <span :class="SplStatus == span.value ? 'bor' : ''" v-for="(span, index) in Specifications[0].valueList" @click="SplStatus = span.value">{{ span.value }}</span>
          </div>
        </van-col> -->
        <!-- 颜色 -->
        <!-- <van-col span="24" class="centenr-box2" v-if="Specifications.length > 1">
          <p>{{ Specifications[1].name }}</p>
          <div>
            <span :class="ColorStatus == span.value ? 'bor' : ''" v-for="(span, index) in Specifications[1].valueList" @click="ColorStatus = span.value">{{ span.value }}</span>
          </div>
        </van-col> -->

        <!-- 第二种方法 -->
        <van-col span="24" class="centenr-box2" v-for="(item1, index1) in Specifications" :key="index1">
          <p>{{ item1.name }}</p>
          <div>
            <!-- :class="SplStatus == span.value ? 'bor' : ''" -->
            <span v-for="(item2, index2) in item1.valueList" @click="onSplStatus(item2, item1, index1)" :class="item2.isChecked ? 'bor' : ''">{{ item2.value }}</span>
          </div>
        </van-col>
      </van-row>
      <!-- 数量 -->
      <van-col span="24" class="centenr-box2">
        <p>数量</p>
        <div>
          <van-stepper v-model="mun" input-width="40px" button-size="32px" min="1" max="5" />
        </div>
      </van-col>
      <van-col span="24" class="centenr-button">
        <van-goods-action>
          <van-goods-action-button type="warning" text="加入购物车" @click="onGoPurchase" />
          <van-goods-action-button type="danger" :text="goodsText" @click="onPurchase" :color="goodsColor" />
        </van-goods-action>
      </van-col>
      <span class="close">
        <van-icon name="close" size="25" @click="onClosePurchase" />
      </span>
    </van-row>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  props: ['Specifications', 'data'],
  data() {
    return {
      // 设置选中状态
      mun: '',
      show: false,
      CurSpecifications: {}, //用来装 选中的规格      0是规格  1是颜色
      getSpecifi: '', //用来存放 对比 规格 后的对应id
      getGoodsImg: this.data[0].url,
      goodsText: '立即购买',
      goodsColor: '',
      stockID: ''
    }
  },
  mounted() {
    // console.log(this.$route.query)
    // 给每个规格 创建一个初始值
    this.Specifications.forEach(element => {
      element.valueList.forEach(item => {
        this.$set(item, 'isChecked', false) //创建初始化值
      })
    })
    // console.log(this.data)
  },
  computed: {},
  methods: {
    onSplStatus(item2, item1, index1) {
      //选中状态的传入
      // 当前选中的设置为true
      item2.isChecked = true
      // 把其他的变为false
      item1.valueList.forEach(element => {
        if (element !== item2) {
          element.isChecked = false
        }
      })
      // 当每点击一次 就会把值存放到  CurSpecifications 内容里面
      // 并且给不同的规格设置好位置
      this.CurSpecifications[index1] = item2.value
      if (item1.name !== '规格') {
        this.getGoodsImg = item2.picUrl
        this.data.forEach(element => {
          // toString()
          let goodsId = element.specifications.toString() == Object.values(this.CurSpecifications).toString()
          if (goodsId) {
            this.stockID = element.number
            if (this.stockID == 0) {
              this.goodsColor = '#dadada'
              this.goodsText = '库存不足'
            } else {
              this.goodsColor = ''
              this.goodsText = '立即购买'
            }
          }
        })
      }
      // if (this.getSpecifi.number == 0) {
      //   this.goodsColor = '#dadada'
      //   this.goodsText = '库存不足'
      // }
      // 获取商品的数量
    },
    // 购买商品
    onPurchase() {
      this.data.forEach(element => {
        // toString()
        let goodsId = element.specifications.toString() == Object.values(this.CurSpecifications).toString()
        if (goodsId) {
          this.getSpecifi = element
        }
      })
      let data = {
        goodsId: this.$route.query.id, //当前商品ID
        number: this.mun, //商品数量
        productId: this.getSpecifi.id //当前商品指定规格的商品ID
      }
      this.$post('cart/fastadd', data).then(result => {
        console.log(result)
        // let query = {
        //   result: result.data.data,
        //   item: this.getSpecifi,
        //   flg: true
        // }
        this.$router.push({ path: '/order', query: result.data })
      })
    },
    // 加入购物车
    onGoPurchase() {
      // 通过对比 规格的数组  得出 对应的ID 并且存起来
      this.data.forEach(element => {
        // toString()
        let goodsId = element.specifications.toString() == Object.values(this.CurSpecifications).toString()
        if (goodsId) {
          this.getSpecifi = element
        }
      })
      // 发送数据到购物车
      let getData = {
        goodsId: this.$route.query.id,
        number: this.mun,
        productId: this.getSpecifi.id
      }
      if (this.getSpecifi.number !== 0) {
        this.$post('cart/add', getData).then(result => {
          Toast.success('添加成功')
        })
      } else {
        Toast({
          message: '库存不足',
          icon: 'warn-o'
        })
      }
    },

    // 关闭购物车的规格
    onClosePurchase() {
      this.$emit('materials', this.show) //触发 input 事件，并传入新值
    }
  }
}
</script>
<style lang="less" scoped>
#goodsDetail {
  transition: all 2s;
}
.goodsDetail-centenr {
  position: relative;
  width: 100%;
  height: 50vh;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  .centenr-box1 {
    .van-col {
      padding: 0.1rem;
      h4 {
        font-size: 0.2rem;
        margin: 10px 0px;
      }
      p {
        opacity: 0.7;
      }
      div {
        background-color: rgb(247, 242, 242);
        img {
          width: 100%;
        }
      }
    }
  }
  .centenr-box2 {
    padding: 0.1rem;
    p {
      margin-top: -5px;
    }
    div {
      margin-top: 0.1rem;
      span {
        padding: 5px 10px;
        border: 1px solid #000;
        opacity: 0.7;
        margin-right: 0.1rem;
      }
    }
  }
  .close {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    opacity: 0.5;
  }
}
.bor {
  border: 1px solid red !important;
  color: red;
}
</style>
